<template>
  <div class="addIngredient-container">
    <div class="container">
      <el-form label-width="120px">
        <!-- 基础信息 -->
        <el-card shadow="never" class="form-section">
          <div slot="header">基础信息</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="食材名称">
                <el-input v-model="ruleForm.name" placeholder="请输入食材名称" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="食材份数">
                <el-input-number 
                  v-model="ruleForm.copies" 
                  :min="1" 
                  :max="999" 
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 仓库位置 -->
        <el-card shadow="never" class="form-section">
          <div slot="header">仓库位置</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="货架">
                <el-select v-model="ruleForm.shelf" placeholder="选择货架" clearable>
                  <el-option 
                    v-for="s in shelves" 
                    :key="s" 
                    :label="s" 
                    :value="s"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行">
                <el-input-number 
                  v-model="ruleForm.row" 
                  :min="1" 
                  :max="20" 
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="列">
                <el-input-number 
                  v-model="ruleForm.column" 
                  :min="1" 
                  :max="20" 
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 其他信息 -->
        <el-card shadow="never" class="form-section">
          <div slot="header">其他信息</div>
          <el-form-item label="保质期">
            <el-date-picker
              v-model="ruleForm.expiryDate"
              type="date"
              placeholder="选择保质日期"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            />
          </el-form-item>
        </el-card>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button type="primary" plain @click="submitAndContinue">保存并继续</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { addIngredient , getIngredientById , updateIngredient} from '@/api/ingredient'

@Component
export default class AddIngredient extends Vue {
  private shelves: string[] = ['A区', 'B区', 'C区', 'D区', '冷冻区', '冷藏区']



  private ruleForm = {
    name: '',
    copies: 1,
    shelf: '',
    row: 1,
    column: 1,
    expiryDate: '',
  }


  created(){
     const id =  this.$route.query.id;
    if(id){
      //编辑模式
      this.loadIngredientData(id as string)
    }
  }

  private async loadIngredientData(id: string){
    try{
      const res = await getIngredientById(id);
      if(res.data.code === 1){
        const data = res.data.data;
        this.ruleForm = {
          name: data.name,
          copies: data.copies,
          shelf: data.wareHouse.shelf,
          row: data.wareHouse.line,
          column: data.wareHouse.column,
          expiryDate: new Date(data.refreshingTime).toISOString(),
          wareHouseId: data.wareHouseId
        }
      }
    } catch(error){
      this.$message.error("加载数据失败"+error.message)
    }
  }

  private handleCancel() {
    this.$router.back()
  }

  private async submitForm() {
    try {
      const params = {
        id: this.$route.query.id,
        name: this.ruleForm.name,
        copies: this.ruleForm.copies,
        refreshingTime: this.ruleForm.expiryDate,
        warehouseId: this.ruleForm.wareHouseId,
        wareHouse: {
          id: this.ruleForm.wareHouseId,
          shelf: this.ruleForm.shelf,
          line: this.ruleForm.row,
          column: this.ruleForm.column
        },
      }
      
      let res;
      if(params.id){
        res = await updateIngredient(params)
      } else {
        //新增模式
        res =  await addIngredient(params);
      }

      if (res.data.code === 1) {
        this.$message.success(params.id? '食材更新成功':'食材添加成功')
        if(!params.id){
          this.handleCancel(); //新增成功后返回上一页
        }
      }
    } catch (error) {
      this.$message.error('提交失败: ' + error.message)
    }
  }

  private submitAndContinue() {
    this.submitForm().then(() => {
      this.ruleForm = {
        name: '',
        copies: 1,
        shelf: '',
        row: 1,
        column: 1,
        expiryDate: ''
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.addIngredient-container {
  padding: 20px;
  
  .container {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }
  
  .form-section {
    margin-bottom: 20px;
    
    &::v-deep .el-card__header {
      background: #f5f7fa;
      padding: 10px 20px;
      font-weight: bold;
    }
  }
  
  .action-buttons {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    
    .el-button {
      min-width: 100px;
      & + .el-button {
        margin-left: 20px;
      }
    }
  }
}
</style>